<!DOCTYPE html5>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>幽灵按钮++</title>
<link type="text/css" href="../css/Ghost button.css"  rel="stylesheet" charset="utf-8" />
<script src="script/jquery-3.2.1.min.js"></script>
<script src="./js/Ghost button.js"></script>
</head>

<body>

<!--
		justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
		提示：使用 align-content 属性对齐交叉轴上的各项（垂直）   默认值：flex-start。	
		CSS 语法:justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;
        flex-start 	默认值。项目位于容器的开头		space-between:项目位于各行之间留有空白的容器内。
        flex-end:项目位于容器的结尾 			center:项目位于容器的中心。
        space-around:项目位于各行之前、之间、之后都留有空白的容器内。
        initial:设置该属性为它的默认值				inherit:从父元素继承该属性
-->

<!-- 幽灵按钮开始-->
<div id="div-btn">
<div id="div-group">
<div id="div-top"></div>
<a href="#">JAVASCRIPT</a>
<div id="div-bottom"></div>
</div>

<div id="div-group">
<div id="div-top"></div>
<a href="#">HTML+CSS</a>
<div id="div-bottom"></div>
</div>

<div id="div-group">
<div id="div-top"></div>
<a href="#">JQUARY</a>
<div id="div-bottom"></div>
</div>
</div>
<!--幽灵按钮结束-->


</body>
</html>
